<template>
  <div class="Schedule-container app-container">
    <FullCalendar
      class="demo-app-calendar"
      ref="fullCalendar"
      :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'listWeek,timeGridDay,timeGridWeek,dayGridMonth',
      }"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="calendarEvents"
      @dateClick="handleDateClick"
      locale="zh-cn"
      @eventClick="eventClick"
      :buttonText="buttonText"
      @select="handleSelect"
      defaultView="timeGridDay"
      selectable="true"
      slot-duration="00:30"
      height="parent"
      :eventLimit="true"
      allDayText="全天"
      :editable="true"
      @datesRender="datesRender"
    />
    <!-- :dayNamesShort='dayNamesShort' :dayNames='dayNamesShort' axisFormat='HH:mm' timeFormat='HH:mm' -->
    <Form v-if="formVisible" ref="Form" @refreshDataList="refreshDataList" />
  </div>
</template>
<script>
import { AppDayList, AppList, List } from "@/api/extend/schedule";
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import bootstrapPlugin from "@fullcalendar/bootstrap";
import Form from "./Form";
export default {
  name: "extend-schedule",
  components: {
    FullCalendar,
    Form,
  },
  data() {
    return {
      formVisible: false,
      calendarPlugins: [
        // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        bootstrapPlugin,
        interactionPlugin, // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: [],
      buttonText: {
        today: "今日",
        day: "日",
        week: "周",
        month: "月",
        list: "日程",
      },
      dayNamesShort: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      titleFormat: { year: "numeric", month: "2-digit" },
      columnHeaderFormat: [
        "ddd", // Mon
        "MM月dd日 ddd", // Mon 9/7
        "MM月dd日 ddd", // Monday 9/7
      ],
      slotDuration: "00:30:00",
      defaultView: "month",
      startTime: "",
      endTime: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    datesRender(calendar) {
      let view = calendar.view;
      this.startTime = this.jsbos.toDate(view.activeStart, "yyyy-MM-dd HH:mm");
      this.endTime = this.jsbos.toDate(view.activeEnd, "yyyy-MM-dd HH:mm");
      this.initData();
    },
    //点击单个时间
    handleDateClick(arg) {
      let startTime = this.jsbos.toDate(arg.date, "yyyy-MM-dd HH:mm:ss"),
        clickTime = this.jsbos.toDate(arg.date, "yyyyMMddHHmm"),
        currTime = this.jsbos.toDate(new Date(), "yyyyMMddHHmm");
      if (clickTime < currTime) return;
      if (clickTime == currTime) {
        let thisDate = new Date();
        thisDate.setHours(thisDate.getHours() + 1);
        startTime = this.jsbos.toDate(startTime, "yyyy-MM-dd HH:mm");
      }
      let endTime = this.jsbos.toDate(
        new Date(Date.parse(startTime) + 60000 * 30),
        "yyyy-MM-dd HH:mm"
      );
      console.log("time:", startTime, endTime);
      this.addOrUpdateHandle("", startTime, endTime);
      this.addOrUpdateHandle(
        "",
        new Date(startTime).getTime(),
        new Date(endTime).getTime()
      );
    },
    // 当选择结束的时候获取开始和结束时间
    handleSelect(info) {
      console.log("form" + info.startStr + " to " + info.endStr);
      let startTime = this.jsbos.toDate(info.start, "yyyy-MM-dd HH:mm"),
        endTime = this.jsbos.toDate(info.end, "yyyy-MM-dd HH:mm");
      if (
        this.jsbos.toDate(info.start, "yyyyMMddHHmm") <
        this.jsbos.toDate(new Date(), "yyyyMMddHHmm")
      ) {
        return this.$message.warning("请勿选择过去的时间！");
      }
      this.addOrUpdateHandle("", startTime, endTime);
      this.addOrUpdateHandle(
        "",
        new Date(startTime).getTime(),
        new Date(endTime).getTime()
      );
    },

    eventClick(data) {
      console.log(data);
      // if (
      //   this.jsbos.toDate(data.event.start, "yyyyMMddHHmm") >
      //   this.jsbos.toDate(new Date(), "yyyyMMddHHmm")
      // ) {
      this.addOrUpdateHandle(
        data.event.id,
        this.jsbos.toDate(data.event.start, "yyyyMMddHHmm"),
        this.jsbos.toDate(data.event.end, "yyyyMMddHHmm")
      );
      // }
    },
    initData() {
      // let query = {
      //   startTime: new Date(this.startTime).getTime(),
      //   endTime: new Date(this.endTime).getTime(),
      // }
      let query = {
        startTime: this.startTime,
        endTime: this.endTime,
      };
      List(query).then((res) => {
        this.calendarEvents = res.data.list.map((o) => ({
          id: o.id,
          title: o.title,
          start: o.startTime,
          end: o.endTime,
          color: o.colour,
          editable: false,
          allDay: false,
        }));
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id, startTime, endTime) {
      console.log("time", id, startTime, endTime);
      let flag = false;
      if (startTime < this.jsbos.toDate(new Date(), "yyyyMMddHHmm")) {
        flag = true;
      }
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.Form.init(id, startTime, flag);
      });
    },
    refreshDataList() {
      this.formVisible = false;
      this.initData();
    },
  },
};
</script>
<style lang="scss">
// you must include each plugins' css
// paths prefixed with ~ signify node_modules
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
@import "~@fullcalendar/bootstrap/main.css";

.Schedule-container {
  padding: 0;

  .fc-toolbar.fc-header-toolbar {
    padding: 10px;
    margin-bottom: 0;
  }

  .fc-button-primary {
    background-color: #1890ff;
    border-color: #1890ff;
    height: 32px;
    line-height: 32px;
    padding: 0 0.65em;
    font-size: 12px;
  }

  .fc-button-primary:not(:disabled):active,
  .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #1682e6;
    border-color: #1682e6;
  }

  .fc-button .fc-icon {
    line-height: 16px;
  }

  .fc-unthemed th {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #909399;
    font-weight: normal;
    background: #f5f7fa;
  }

  .fc-center {
    color: #606266;
  }

  .fc-unthemed th,
  .fc-unthemed td,
  .fc-unthemed thead,
  .fc-unthemed tbody,
  .fc-unthemed .fc-divider,
  .fc-unthemed .fc-row,
  .fc-unthemed .fc-content,
  .fc-unthemed .fc-popover,
  .fc-unthemed .fc-list-view,
  .fc-unthemed .fc-list-heading td {
    border-color: #ebeef5;
    color: #606266;
  }
}
</style>
